<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .layui-anim{
            width: 100px;
            height: 100px;
            border-radius: 10%;
            float: left;
            margin: 5px;
        }
    </style>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <script src="../../layui/layui.js"></script>
</head>
<body>
<div class="layui-container">
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">标题一</li>
            <li>标题二</li>
            <li>标题三</li>
            <li>标题四</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">内容1</div>
            <div class="layui-tab-item">内容2</div>
            <div class="layui-tab-item">内容3</div>
            <div class="layui-tab-item">内容4</div>
        </div>

        <button class="layui-btn" lay-submit lay-filter="login">登入</button>
    </div>
</div>

<!--颜色-->
<div class="layui-container">
    <div class="layui-bg-blue">Blue</div>
    <div class="layui-bg-black">Black</div>
    <div class="layui-bg-cyan">Cyan</div>
    <div class="layui-bg-gray">Gray</div>
    <div class="layui-bg-green">Green</div>
    <div class="layui-bg-orange">Orange</div>
    <div class="layui-bg-red">Red</div>
</div>
<!--图标-->
<div class="layui-container">
    <i class="layui-icon">&#xe60c;</i>
    <i class="layui-icon">&#xe68f;</i>
    <i class="layui-icon layui-icon-face-smile" style="color: rebeccapurple;font-size:50px"></i>
    <i class="layui-icon layui-icon-ios" style="font-size: 50px"></i>
</div>
<!--动画-->
<div class="layui-container">
    <h1>追加：layui-anim-loop 循环动画</h1>
    <div class="layui-anim layui-anim-up layui-bg-blue">从最底部往上滑入</div>
    <div class="layui-anim layui-anim-upbit layui-bg-blue">微微往上滑入</div>
    <div class="layui-anim layui-anim-scaleSpring layui-bg-blue">平滑放大</div>
    <div class="layui-anim layui-anim-fadein layui-bg-blue">渐现</div>
    <div class="layui-anim layui-anim-fadeout layui-bg-blue">渐隐</div>
    <div class="layui-anim layui-anim-rotate layui-bg-blue layui-anim-loop">360度旋转</div>
</div>
<br>
<!--按钮-->
<div class="layui-container">
    <button class="layui-btn">默认</button>
    <button class="layui-btn layui-btn-primary">原始</button>
    <button class="layui-btn layui-btn-normal">百搭</button>
    <button class="layui-btn layui-btn-warm">暖色</button>
    <button class="layui-btn layui-btn-danger">警告</button>
    <button class="layui-btn layui-btn-disabled">禁用</button>
</div>
</body>
</html>